<template>
    <a-layout class="Layout bg">
        <Myheader logo="智慧电力系统" :headers="Headers" class="header" />

        <a-layout>
            <a-layout>
                <a-layout-content class=".bg-alpha bg">
                    <RouterView></RouterView>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script lang="ts" setup>
import Myheader from '@/components/Headers/MyHeader.vue';
import { RouterView } from 'vue-router';

const Headers = [
    { to: '/power/index', text: '用电信息' },
    { to: '/power/energyAnalaysis', text: '用电分析' },
    { to: '/power/dataReport', text: '数据报表' },
    { to: '/power/energyContrl', text: '节电管控' }
];
</script>
<style lang="scss" scoped>
.header {
    z-index: 1;
}

.bg {
    width: 100%;
    height: 100%;
    background: url('@/assets/icons/bg.png') no-repeat center 0px;
    background-position: center 0px;
    background-size: cover;
}

:global(.bg-alpha) {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.Layout {
    height: 100vh;
    width: 100%;

    .mysider {
        display: none;
    }
}

#components-layout-demo-top-side-2 .logo {
    float: left;
    width: 120px;
    height: 31px;
    margin: 16px 24px 16px 0;
    background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
    float: right;
    margin: 16px 0 16px 24px;
}

.site-layout-background {
    background: #fff;
}
</style>
